<template>
  <view class="map-select-container">
    <!-- 导航栏 -->
    <nav-bar title="选择地址" @back="goBack"></nav-bar>
    
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input 
          type="text" 
          v-model="keyword" 
          placeholder="搜索地址" 
          @confirm="searchLocation"
        />
      </view>
    </view>
    
    <!-- 地图容器 -->
    <view class="map-container">
      <map
        id="map"
        class="map"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :scale="scale"
        show-location
        @regionchange="onRegionChange"
        @tap="onMapTap"
      ></map>
    </view>
    
    <!-- 地址信息 -->
    <view class="address-info">
      <view class="address-text">{{ address }}</view>
      <view class="coordinate-text">经度: {{longitude}} 纬度: {{latitude}}</view>
    </view>
    
    <!-- 确认按钮 -->
    <view class="confirm-btn" @tap="confirmLocation">确认选择</view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      keyword: '',
      latitude: 39.904030,
      longitude: 116.407526,
      address: '正在获取地址...',
      scale: 16,
      markers: [],
      mapKey: 'GJZBZ-5ZV6G-ID2QK-Q6ODP-WNIPQ-HZFB4', // 替换为您的腾讯地图密钥
      isInitialized: false
    }
  },
  onLoad() {
    // 获取当前位置
    this.getCurrentLocation()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 获取当前位置
    getCurrentLocation() {
      // 显示加载中
      uni.showLoading({
        title: '获取位置中...'
      })
      
      // 调用后端接口获取IP定位
      uni.request({
        url: `${uni.$config.baseUrl}/map/location/v1/ip`,
        method: 'GET',
        data: {
          key: this.mapKey
        },
        success: (res) => {
          uni.hideLoading()
          if (res.data.code === 200) {
            const result = res.data.data
            if (result && result.location) {
              this.latitude = result.location.lat
              this.longitude = result.location.lng
              this.updateMarker()
              this.getAddressFromLocation()
            } else {
              // 如果IP定位失败，使用默认位置
              // uni.showToast({
              //   title: 'IP定位失败，使用默认位置',
              //   icon: 'none'
              // })
              this.getAddressFromLocation()
            }
          } else {
            // 如果接口调用失败，使用默认位置
            uni.showToast({
              title: '获取位置失败，使用默认位置',
              icon: 'none'
            })
            this.getAddressFromLocation()
          }
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('获取位置失败:', err)
          // uni.showToast({
          //   title: '获取位置失败，使用默认位置',
          //   icon: 'none'
          // })
          this.getAddressFromLocation()
        }
      })
    },
    
    // 更新地图标记
    updateMarker() {
      this.markers = [{
        id: 1,
        latitude: this.latitude,
        longitude: this.longitude,
        width: 32,
        height: 32,
        iconPath: '/static/icons/location.png', // 确保有这个图标文件
        callout: {
          content: '已选择位置',
          color: '#333333',
          fontSize: 14,
          borderRadius: 5,
          bgColor: '#FFFFFF',
          padding: 5,
          display: 'ALWAYS'
        }
      }]
    },
    
    // 根据经纬度获取地址
    getAddressFromLocation() {
      // 显示加载中
      uni.showLoading({
        title: '获取地址中...'
      })
      
      // 调用后端接口获取地址
      uni.request({
        url: `${uni.$config.baseUrl}/map/geocoder/v1/reverse`,
        method: 'GET',
        data: {
          location: `${this.latitude},${this.longitude}`,
          key: this.mapKey
        },
        success: (res) => {
          uni.hideLoading()
          if (res.data.code === 200) {
            const result = res.data.data
            this.address = result.address
            this.isInitialized = true
          } else {
            uni.showToast({
              title: '获取地址失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('获取地址失败:', err)
          uni.showToast({
            title: '获取地址失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 搜索位置
    searchLocation() {
      if (!this.keyword) {
        uni.showToast({
          title: '请输入搜索关键词',
          icon: 'none'
        })
        return
      }
      
      // 显示加载中
      uni.showLoading({
        title: '搜索中...'
      })
      
      // 调用后端接口搜索位置
      uni.request({
        url: `${uni.$config.baseUrl}/map/place/v1/search`,
        method: 'GET',
        data: {
          keyword: this.keyword,
          boundary: `nearby(${this.latitude},${this.longitude},1000)`,
          key: this.mapKey,
          page_size: 10,
          page_index: 1
        },
        success: (res) => {
          uni.hideLoading()
          if (res.data.code === 200) {
            const data = res.data.data
            if (data.length > 0) {
              // 跳转到第一个结果
              this.latitude = data[0].location.lat
              this.longitude = data[0].location.lng
              this.updateMarker()
              this.getAddressFromLocation()
            } else {
              uni.showToast({
                title: '未找到相关地址',
                icon: 'none'
              })
            }
          } else {
            uni.showToast({
              title: '搜索失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('搜索失败:', err)
          uni.showToast({
            title: '搜索失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 地图区域变化事件
    onRegionChange(e) {
      if (e.type === 'end' && this.isInitialized) {
        // 获取地图中心点
        const mapCtx = uni.createMapContext('map')
        mapCtx.getCenterLocation({
          success: (res) => {
            this.latitude = res.latitude
            this.longitude = res.longitude
            this.updateMarker()
            this.getAddressFromLocation()
          }
        })
      }
    },
    
    // 地图点击事件
    onMapTap(e) {
      this.latitude = e.detail.latitude
      this.longitude = e.detail.longitude
      this.updateMarker()
      this.getAddressFromLocation()
    },
    
    // 确认选择位置
    confirmLocation() {
      // 获取当前页面实例
      const eventChannel = this.getOpenerEventChannel()
      
      // 返回数据到上一页
      eventChannel.emit('selectLocation', {
        address: this.address,
        latitude: this.latitude,
        longitude: this.longitude
      })
      
      // 返回上一页
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.map-select-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  
  .search-box {
    padding: 20rpx;
    background: #FFFFFF;
    
    .search-input {
      display: flex;
      align-items: center;
      background: #F5F5F5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      height: 80rpx;
      
      .search-icon {
        margin-right: 10rpx;
        font-size: 32rpx;
      }
      
      input {
        flex: 1;
        height: 80rpx;
        font-size: 28rpx;
      }
    }
  }
  
  .map-container {
    flex: 1;
    position: relative;
    
    .map {
      width: 100%;
      height: 100%;
    }
  }
  
  .address-info {
    padding: 30rpx;
    background: #FFFFFF;
    
    .address-text {
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }
    
    .coordinate-text {
      font-size: 24rpx;
      color: #999999;
    }
  }
  
  .confirm-btn {
    height: 100rpx;
    background: #2B87FF;
    color: #FFFFFF;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:active {
      opacity: 0.9;
    }
  }
}
</style> 